<template>
	<view class="pages">
		<!-- 搜索功能 -->
		<view class="uni-search-box">
			<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled
				:placeholder="inputPlaceholder" />
			<view class="cover-search-bar" @click="searchClick"></view>
		</view>

		<view class="headtoo">
			<view>商品分类</view>
			<view>
			</view>
			<view @click="ccc" v-show="aaa"> 宫格排序</view>
			<view @click="ccc" v-show="bbb"> 列表排序</view>
		</view>

		<view>
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-mall-goods">
				<scroll-view scroll-x="true">
					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
						activeColor="#4cd964"></uni-segmented-control>
				</scroll-view>
			
			
					<view v-for="(item,index) in itemContent" :key="index" style="position: relative;" @click="handleItemClick(item._id)">
						

							
									<!-- <view class="image">
										<image :src="item.goods_thumb"></image>
									</view>
									<view class="list-body-1">
										<text>{{item.name}}</text>
										<text>￥{{item.month_sell_count}}</text>
									</view> -->
									
									
									<view class="nr"  v-show="aaa" >
									
										<view class="nrdiv"  >
											<image :src="item.goods_thumb" mode=""></image>
											<view>{{item.name}}</view>
											<view>￥:  {{item.month_sell_count}}</view>
										</view>
									
									</view>
									
									
									
									<view class="nr2"  v-show="bbb" >
									
										<view class="nrdiv2" @click="xiangxi(item._id)" >
											<image :src="item.goods_thumb" mode=""></image>
											<view>{{item.name}}</view>
											<view>￥:  {{item.month_sell_count}}</view>
										</view>
									
									</view>
								
						
					
				</view>
			</unicloud-db>
		</view>
	</view>
</template>

<script>
	let cdbRef;
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";

	import Gps from '@/uni_modules/json-gps/js_sdk/gps.js';
	const gps = new Gps(),
		db = uniCloud.database();

	export default {
		components: {
			statusBar
		},
		computed: {
			inputPlaceholder(e) {
				if (uni.getStorageSync('CURRENT_LANG') == "en") {
					return 'Please enter the search content'
				} else {
					return '请输入搜索内容'
				}
			},
			colList() {
				return []
			}
		},
		data() {
			// '手机', '电视', '笔记本平板', '耳机音响', '家电', '智能路由器', '电源配件'
			return {
				items: [],
				current: 0,
				where: '"article_status" == 1',
				keyword: "",
				tabIndex: 0,
				aaa:true,
				bbb: false,
				Itemget: [],
				itemId: '',
				itemContent:{},			
			}
		},
		onLoad() {
			db.collection('opendb-mall-categories').get().then((res) => {
				this.Itemget = res.result.data
				for (var i = 0; i < this.Itemget.length; i++) {
					this.items.push(this.Itemget[i].name)
				}
			})
		},
		watch: {
			keyword(keyword, oldValue) {
				let where = '"article_status" == 1 '
				if (keyword) {
					this.where = where + `&& /${keyword}/.test(title)`;
				} else {
					this.where = where;
				}
			}
		},
		methods: {
			
			ccc()
			{
				this.aaa = !this.aaa
				this.bbb = !this.bbb
				console.log("转换成功")
			},
			handleItemClick(id) {
			  uni.navigateTo({
			    url:'/pages/xiangx/xiangx?id=' + id,
			  })
			  },
		
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				this.tabIndex = this.current;
				console.log(this.tabIndex)
				let title = this.items[this.tabIndex];
				db.collection('opendb-mall-categories').where({
					'name': title
				}).get().then((res) => {
					this.itemId = res.result.data[0]._id
					console.log(this.itemId)
					db.collection('opendb-mall-goods').where({
						'category_id': this.itemId
					}).get().then((res) => {
						console.log(res)
						this.itemContent = res.result.data
					})
				})
			},
			searchClick(e) { //点击搜索框
				uni.hideKeyboard();
				uni.navigateTo({
					url: '/pages/list/search/search',
					animationType: 'fade-in'
				});
			},
			
		}
	}
</script>

<style>
	.uni-search-box {
		background-color: #FFFFFF;
		position: sticky;
		height: 50px;
		top: 0;
		left: 0;
	}

	.cover-search-bar {
		height: 50px;
		position: relative;
		top: -50px;
		margin-bottom: -50px;
	}

	.segmented-control {
		width: 150%
	}

	.list-body {
		display: flex;
		width: 100%;
		background-color: rgb(245, 245, 245);
		flex-direction: row;
		/* flex-direction: column; */
		flex-wrap: wrap;
	}
	.nr {
	         
		text-align: center;
	}
	
	.nrdiv {
		width: 370rpx;
	    height: 360rpx;
		border: #c5c5c5 1px solid;
		float: left;
	}
	
	.nrdiv image {
		width: 300rpx;
		height: 240rpx;
		margin-top: 15rpx;
	}
	
	.nrdiv view:nth-child(2) {
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.nrdiv view:nth-child(3) {
		font-size: 20rpx;
		margin-bottom: 10rpx;
		margin-top: 5rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	
	.nr2 {
	         width: 750rpx;
		text-align: center;
	}
	
	.nrdiv2 {
		width: 750rpx;
	    height: 700rpx;
		border: #c5c5c5 1px solid;
		
	}
	
	.nrdiv2 image {
		width: 750rpx;
		height: 500rpx;
		margin-top: 5rpx;
	}
	
	.nrdiv2 view:nth-child(2) {
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.nrdiv2 view:nth-child(3) {
		font-size: 20rpx;
		margin-bottom: 10rpx;
		margin-top: 5rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	
.headtoo {

		height: 50rpx;
		
		position: relative;
		border: #c5c5c5 1px solid;
	}

	.headtoo view:nth-child(1) {
		position: absolute;
		left: 20rpx;
	}

	.headtoo view:nth-child(2) {
		position: absolute;
		left: 190rpx;
		color: #007AFF;
	}

	.headtoo view:nth-child(3) {
		position: absolute;
		right: 130rpx;
		color: #a8a8a8;
	}
	.headtoo view:nth-child(4) {
		position: absolute;
		right: 130rpx;
		color: #a8a8a8;
	}
	
	
</style>